<!--  -->
<template>
    <pageTabelLayout>
        <template #pageHeader>
    <a-form :model="form" layout="inline" size="mini">
        <a-form-item label="商品编码">
            <a-input allow-clear class="bacClass" v-model="form.materialCode" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="商品名称">
            <a-input allow-clear class="bacClass" v-model="form.materialName" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="商品型号">
            <a-input allow-clear class="bacClass" v-model="form.specName" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="商品性质">
            <a-input allow-clear class="bacClass" v-model="form.bigClassName" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="商品类别">
            <a-input allow-clear class="bacClass" v-model="form.middleClassName" :style="{ width: '150px' }" />
        </a-form-item>
    </a-form>
    <!-- '开需求单', -->
    <div class="cssToolbar">
        <Toolbar :items="[
            `查询`, '导出']" @select="cx" @export="exports">
        </Toolbar>
    </div>
</template>
<template #pageTabel>
        <a-spin :loading="form.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
                @grid-ready="gridReady" @columnResized="onColumnResized" @columnMoved="onColumnMoved"
                @columnVisible="onColumnVisible" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="dataList" :columnDefs="CwColumns"
                :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size"
                :current="page" />
        </a-spin>
    </template>
</pageTabelLayout>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import filedownload from 'js-file-download'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
const localeText1: any = ref(localeText)
const pagingList1: any = ref(pagingList)
const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}

const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}


const dataList: any = ref([])



const form: any = reactive({
    pageLoading: false,
    materialCode: '',
    materialName: '',
    specName: '',
    bigClassName: '',
    middleClassName: '',
})

function doRefresh() {
    form.pageLoading = true
    updateGridState01()
    post({
        url: "/finance/FinanceReport/getPurchaseMaterialInfo",
        data: {
            page: page.value,
            size: size.value,
            materialCode: form.materialCode,
            materialName: form.materialName,
            specName: form.specName,
            bigClassName: form.bigClassName,
            middleClassName: form.middleClassName,
        },
    })
        .then(({ data, code, message }: any) => {
            if (code === 200) {
                dataList.value = data.list.map((res) => {
                    res['ZXCL'] = 0
                    res['ZDCL'] = 0
                    res['TQSJ'] = 0
                    res['HSCGJ'] = 0
                    res['BHSCGJ'] = 0
                    res['HSXSJ'] = 0
                    res['BHSXSJ'] = 0
                    res['BHSJHJ'] = 0
                    res['HSLSJ'] = 0
                    res['BJZQ'] = 0
                    res['PCGLBZ'] = 0
                    res['PCXSJJL'] = 0
                    res['ZGCGJ'] = 0
                    return res
                })
                gridOption.value.setRowData(data.list)
                total.value = data.total
            } else {
                Message.error(message)
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}


const cx = () => {
    page.value = 1
    doRefresh()
}

const CwColumns = [
    {
        headerName: '商品编码',
        field: 'materialCode',
        width: 150
    },
    {
        headerName: '商品名称',
        field: 'materialName',
        width: 150
    },
    {
        headerName: '规格型号',
        field: 'specName',
        width: 150
    },
    {
        headerName: '封存标志',//
        field: 'FCBS',
        width: 150
    },
    {
        headerName: '商品性质',
        field: 'bigClassName',
        width: 150
    },
    {
        headerName: '商品类别',
        field: 'middleClassName',
        width: 150
    },
    {
        headerName: '最小计量单位',
        field: 'ZXJLDW',//
        width: 150
    },
    {
        headerName: '存货计量单位',
        field: 'unit',
        width: 150
    },
    {
        headerName: '货位',
        field: 'HW',//
        width: 150
    },
    {
        headerName: '产地',
        field: 'CD',//
        width: 150
    },
    {
        headerName: '供应商',
        field: 'GYS',//
        width: 150
    },
    {
        headerName: '商品货号',
        field: 'SPHH',//
        width: 150
    },
    {
        headerName: '最小存量',
        field: 'ZXCL',//0
        width: 150
    },
    {
        headerName: '最大存量',
        field: 'ZDCL',//0
        width: 150
    },
    {
        headerName: '提前时间',
        field: 'TQSJ',//0
        width: 150
    },
    {
        headerName: '含税采购价',
        field: 'HSCGJ',//0
        width: 150
    },
    {
        headerName: '不含税采购价',
        field: 'BHSCGJ',//0
        width: 150
    },
    {
        headerName: '含税销售价',
        field: 'HSXSJ',//0
        width: 150
    },
    {
        headerName: '不含税销售价',
        field: 'BHSXSJ',//0
        width: 150
    },
    {
        headerName: '不含税计划价',
        field: 'BHSJHJ',//0
        width: 150
    },
    {
        headerName: '含税零售价',
        field: 'HSLSJ',//0
        width: 150
    },
    {
        headerName: '保价值期',
        field: 'BJZQ',//0
        width: 150
    },

    {
        headerName: '批次管理标志',
        field: 'PCGLBZ',//0
        width: 150
    },
    {
        headerName: '组件商品标志',
        field: 'ZJSPBZ',//
        width: 150
    },
    {
        headerName: '组装标志',
        field: 'ZZBZ',//
        width: 150
    },
    {
        headerName: '受托商品标志',
        field: 'STSPBZ',//
        width: 150
    },
    {
        headerName: '备注',
        field: 'BZ',//
        width: 150
    },
    {
        headerName: '自定义项目0',
        field: 'ZDYXM0',//
        width: 150,
    },
    {
        headerName: '自定义项目1',
        field: 'ZDYXM1',//
        width: 150,
    },
    {
        headerName: '自定义项目2',
        field: 'ZDYXM2',//
        width: 150,
    },
    {
        headerName: '自定义项目3',
        field: 'ZDYXM3',//
        width: 150,
    },
    {
        headerName: '自定义项目4',
        field: 'ZDYXM4',//
        width: 150,
    },
    {
        headerName: '自定义项目5',
        field: 'ZDYXM5',//
        width: 150,
    },
    {
        headerName: '库存量',
        field: 'KCl',//
        width: 150,
    },
    {
        headerName: '不含税最低销售价格',
        field: 'BHSZDXSJG',//
        width: 150,
    },
    {
        headerName: '不含税销售价中不打扣金额',
        field: 'BHSXSJZBDKJE',//
        width: 150,
    },
    {
        headerName: '计量单位',
        field: 'purchaseUnit',
        width: 150,
    },
    {
        headerName: '发票品号',
        field: 'FPPH',//
        width: 150,
    },
    {
        headerName: '条码',
        field: 'TM',//
        width: 150,
    },
    {
        headerName: '批准文号',
        field: 'PZWH',//
        width: 150,
    },
    {
        headerName: '注册商标',
        field: 'ZCSB',//
        width: 150,
    },
    {
        headerName: '包装单位',
        field: 'BZDW',//
        width: 150,
    },
    {
        headerName: '包装规格',
        field: 'BZGG',//
        width: 150,
    },
    {
        headerName: '体积单位',
        field: 'TJDW',//
        width: 150,
    },
    {
        headerName: '重量单位',
        field: 'ZLDW',//
        width: 150,
    },
    {
        headerName: '批次销售加价率',
        field: 'PCXSJJL',//0
        width: 150,
    },
    {
        headerName: '商品名',
        field: 'SPM',//
        width: 150,
    },
    {
        headerName: '最高采购价',
        field: 'ZGCGJ',//0
        width: 150,
    },
    {
        headerName: '最低采购价',
        field: 'ZDCGJ',//
        width: 150,
    },
    {
        headerName: 'ABC等级',
        field: 'ABCDJ',//
        width: 150,
    },
    {
        headerName: '网上销售标志',
        field: 'WSXSBZ',//
        width: 150,
    },
]

const pageData = reactive({
    rHeight: 0
})

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    doRefresh()
})

const exports = () => {
    post({
        url: '/finance/FinanceExport/exportPurchaseMaterialInfo',
        data: {
            materialCode: form.materialCode,
            materialName: form.materialName,
            specName: form.specName,
            bigClassName: form.bigClassName,
            middleClassName: form.middleClassName,
            providerCode: form.providerCode,
            providerName: form.providerName,
        },
        responseType: 'blob',
    }).then((res: any) => {
        filedownload(res, '商品.dat')
    })
}
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('JingShuanPanBbSp-1', gridOption, colState, CwColumns)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
const onColumnVisible = () => {
    saveGridState01()
}
</script>
<style lang='less' scoped>
.cssToolbar {
    text-align: right;
    margin-bottom: 2px;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>